<template>
  <footer class="bg-gray-900 text-white py-12">
    <div class="container mx-auto px-4">
      <!-- 页脚导航 -->
      <div class="grid grid-cols-1 md:grid-cols-5 gap-8 mb-8">
        <!-- 导航链接组 -->
        <div v-for="(section, index) in footerLinks" :key="index" class="space-y-4">
          <h3 class="text-lg font-medium">{{ section.title }}</h3>
          <ul class="space-y-2">
            <li v-for="(item, idx) in section.items" :key="idx">
              <router-link 
                :to="item.link"
                class="text-gray-400 hover:text-white transition-colors duration-200 text-sm"
              >
                {{ item.title }}
              </router-link>
            </li>
          </ul>
        </div>

        <!-- 联系信息 -->
        <div class="space-y-4">
          <h3 class="text-lg font-medium">联系我们</h3>
          <div class="space-y-2">
            <p class="text-gray-400 text-sm flex items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
              </svg>
              {{ companyInfo.phone }}
            </p>
            <p class="text-gray-400 text-sm flex items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
              {{ companyInfo.email }}
            </p>
          </div>
          <div class="mt-4">
            <img 
              :src="companyInfo.qrcode" 
              alt="微信公众号" 
              class="w-24 h-24"
            />
            <p class="text-gray-400 text-sm mt-2">扫码关注公众号</p>
          </div>
        </div>
      </div>

      <!-- 版权信息 -->
      <div class="border-t border-gray-800 pt-8 mt-8">
        <div class="text-center text-gray-400 text-sm flex justify-center items-center space-x-4">
          <p>© {{ new Date().getFullYear() }} {{ companyInfo.name }}. All rights reserved.</p>
          <span class="text-gray-600">|</span>
          <p>{{ companyInfo.icp }}</p>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
const footerLinks = [
  {
    title: '解决方案',
    items: [
      { title: 'LLM应用平台', link: '/solutions#llm' },
      { title: '解决方案列表', link: '/solutions#vdi' }
    ]
  },
  {
    title: '关于我们',
    items: [
      { title: '公司介绍', link: '/about' },
      { title: '联系我们', link: '/contact' }
    ]
  },
  {
    title: '新闻资讯',
    items: [
      { title: '新闻列表', link: '/news' }
    ]
  },
  {
    title: '客户案例',
    items: [
      { title: '案例展示', link: '/cases' }
    ]
  }
]

const companyInfo = {
  name: '西安力望电子科技有限公司',
  phone: '029-88776655',
  email: 'contact@liwang.com',
  qrcode: '/images/qrcode.jpg',
  icp: '陕ICP备XXXXXXXX号-1'
}
</script> 